<template>
<div class="page-body">
  <div class="page-header">
    <h1 class="page-title">设置</h1>
    <el-breadcrumb>
      <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item >管理员信息修改</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="box">
    <div class="settingWrap">
       <div v-for="(item,index) in user" :key="index">
          <p class="title">个人资料</p>
          <div class="msg">
            <div class="avtar">
              <span class="leftText">头像:</span>
              <img :src= admin.AVTAR alt="" v-show="!changeAvtar" style="width:60px;height:60px;">
              <input type="text" name="" v-show="changeAvtar" v-model="user[0].avtar">
              <span class="tips" v-show="!changeAvtar">仅支持外链图片,请输入有效的外链图片地址</span>
              <span class="change" @click="changeNickAvtar">
                <img src="" alt=""> 修改
              </span>
            </div>
            <div class="clear"></div>
            <p>
              <span class="leftText">昵称:</span>
              <span v-show="!changeNick">{{admin.USER}}</span>
              <input type="text" name="" v-show="changeNick" v-model="user[0].name">
              <span class="change" @click="changeNickName">
                <img src="" alt=""> 修改
              </span>
            </p>
            <div class="divSex"><span class="leftText">性别:</span>
              <span v-show="!changeSex">{{admin.SEX}}</span>
            </div>
            <div class="clear"></div>
            <p><span class="leftText">邮箱:</span>
              <span v-show="!changeEmail">{{item.email}}</span>
              <input type="text" name="" v-show="changeEmail">
            </p>
            <p><span class="leftText">注册时间:</span>
              <span v-show="!changeEmail">{{admin.REGTIME}}</span>
              <input type="text" name="" v-show="changeEmail">
            </p>
            <p><span class="leftText">个人简介:</span>
              <span v-show="!changeIntro" class="introText">{{item.intro}}</span>
              <input type="text" name="" v-show="changeIntro">
            </p>
          </div>
        </div>
    </div>
  </div>
</div>
</template>
<script>
import { mapGetters,mapActions  } from 'vuex'
export default {
  data(){
    return{
      form:[
        {
          user:'',
          pwd:'',
          email:'',
          name:null
        }
      ],
      user: [
        {
          name: '',
          avtar:'',
          sex: '男',
          age:'23',
          email: '335136854@qq.com',
          intro: '这个世界需要英雄~~~~'
        }
      ],
      changeAvtar:false,
      changeNick:false,
      changeSex:false,
      changeAge:false,
      changeEmail:false,
      changeIntro:false,
      radio:'1'
    }
  },
  computed:{
    ...mapGetters([
      'admin',
    ])
  },
  mounted(){
    this.getAdmin()
  },
  methods:{
    changeNickName(){
      if(!this.changeNick){
        // return
      }else{
        this.$store.dispatch('editMsg',
          {
            key:'USER',
            value:this.user[0].name
          }
        )
        this.$router.go(0)
      }
      this.changeNick = !this.changeNick;
    },
    changeNickSex(){
      this.changeSex = !this.changeSex;
      // this.$store.dispatch('editMsg',
      //   {
      //     key:'name',
      //     value:this.user[0].name
      //   }
      // )
    },
    changeNickAge(){
      this.changeAge = !this.changeAge;
    },
    changeNickEmail(){
      this.changeEmail = !this.changeEmail;
    },
    changeNickIntro(){
      this.changeIntro = !this.changeIntro;
    },
    changeNickAvtar(){
      if(!this.changeAvtar){}else{
        this.$store.dispatch('editMsg',
          {
            key:'AVTAR',
            value:this.user[0].avtar
          }
        )
        this.$router.go(0)
      }
      this.changeAvtar = !this.changeAvtar;
    },
    getAdmin(){
      this.$store.dispatch('getAdminMsg');
    }
  }
}
</script>

<style scoped lang="less">
  .clear{
    clear: both;
  }
  .box-body{
    width: 100%;
    overflow: auto;
  }
  .box{
    width: 40%;
    margin: 100px auto;
    border-radius: 6px;
  }
  .settingWrap{
    // height: 500px;
    padding: 0px 20px 20px 20px;
    font-size: 18px;
    p{
      height: 35px;
    }
    .divSex{
      height: 35px;
    }
    .title{
      border-bottom: 1px solid rgb(194, 192, 192);
      padding-bottom: 15px;
      font-size: 22px;
      font-weight: bold;
    }
    .leftText{
      display: block;
      float: left;
      width: 120px;
    }
    .introText{
      display: inline-block;
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space:nowrap;
    }
    .change{
      float: right;
      cursor: pointer;
      color:#007fff;
      font-size: 16px;
      img{
        position: relative;
        top: 1px;
      }
    }
    .sex{
      display: inline-block;
      float: left;
    }
    .avtar{
      height: 100px;
      img{
        float: left;
      }
      .tips{
        font-size: 12px;
        display: block;
        float: left;
        width: 100px;
        padding: 0px 0px 0 20px;
      }
    }
    .msg{
      letter-spacing: 1.5px;
      padding-left: 80px;
    }
  }
</style>
